<div class="container user-form-screen">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div class="user-form-container">
        <h3 class="center-block sys-title">
          <img class="form-logo" src="assets/images/mask.svg" alt="logo"> SN-Admin
        </h3>
        <form [formGroup]="registForm" (ngSubmit)="doRegister()" novalidate class="form-horizontal" role="form">
          <div class="form-group" [ngClass]="{ 'has-error':registForm.get('userName').invalid && registForm.get('userName').touched}">
            <label class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" formControlName="userName" placeholder="请输入用户名...">
              <span class="help-block" *ngIf="registForm.hasError('required','userName') && registForm.get('userName').touched">
                用户名必须输入！
              </span>
            </div>
          </div>
          <fieldset formGroupName="passGroup">
            <div class="form-group" [ngClass]="{ 'has-error': registForm.get('passGroup.password').invalid && registForm.get('passGroup.password').touched}">
              <label class="col-sm-2 control-label">密码：</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" formControlName="password" placeholder="请输入密码...">
                <span class="help-block" *ngIf="registForm.hasError('required','passGroup.password') && registForm.get('passGroup.password').touched">
                  密码必须输入！
                </span>
                <span class="help-block" *ngIf="registForm.hasError('minlength','passGroup.password') && loginForm.get('passGroup.password').touched">
                  请至少输入{{loginForm.getError('minlength','password').requiredLength}}位字符！
                </span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{ 'has-error': registForm.get('passGroup.confirmPass').invalid && registForm.get('passGroup.confirmPass').touched}">
              <label class="col-sm-2 control-label">确认密码：</label>
              <div class="col-sm-10">
                <input type="password" class="form-control" formControlName="confirmPass" placeholder="请再次输入密码...">
                <span class="help-block" *ngIf="registForm.hasError('passwordMatcher','passGroup.confirmPass') && registForm.get('passGroup.confirmPass').touched">
                  确认密码不匹配！
                </span>
              </div>
            </div>
          </fieldset>
          <div class="form-group" [ngClass]="{ 'has-error': registForm.get('email').invalid && registForm.get('email').touched}">
            <label class="col-sm-2 control-label">邮箱：</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" formControlName="email" placeholder="请再次输入邮箱...">
              <span class="help-block" *ngIf="registForm.hasError('required','email') && registForm.get('email').touched">
                邮箱必须输入！
              </span>
              <span class="help-block" *ngIf="registForm.hasError('email','email') && registForm.get('email').touched">
                请输入正确的邮箱格式！
              </span>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="pull-right btn btn-info" (click)="toLogin()">返回</button>
              <button type="submit" class="btn btn-success" [disabled]="registForm.invalid">注册</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
